<template>
    <div class="home-container">
        <!--
        <div class="home-content">
            <Button @click="test">post测试</Button>
            <Button @click="get">get方法测试</Button>
            <Input :rows="10" style="margin-top: 20px" v-model="dataUrl" type="textarea" />
            <Input :rows="10" style="margin-top: 20px" v-model="postData" type="textarea" />
            <Input :rows="10" style="margin-top:20px" v-model="userInfo" type="textarea"/>
        </div>
        -->

    <div>我的持仓
        <Table :columns="columns1" :data="data1"  :row-class-name="rowClassName"></Table>
    </div>
    <div>我的资产
        <Table :columns="columns2" :data="data2"  :row-class-name="rowClassName"></Table>
    </div>
    <div>历史成交
        <Table :columns="columns3" :data="data3"  :row-class-name="rowClassName"></Table>
    </div>
    </div>
</template>

<script>
import { testGet, testPost } from '@/api'
import { getUserInfo } from '@/api/login'
import { myStock } from '@/api/order'
import { getMyTransaction } from '@/api/transaction'
import store from '@/store'

export default {
    name: 'home',
    data() {
        return {
            userInfo: '',
            postData: '',
            dataUrl: '',
            columns1: [
                {
                    title: 'Id',
                    key: 'url',
                    render: (h, params) => {
                        const row = params.row
                        const color = 'primary'
                        const realUrl = 'http://localhost:8080/#/trade/' + row.stock
                        const showText = store.state.stockInfo[row.stock]
                        return h('el-link', {
                            props: {
                                type: color,
                                href: realUrl,
                            },
                        }, showText)
                    },
                },
                {
                    title: '持有数量',
                    key: 'num_free',
                },
            ],
            data1: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03',
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01',
                },
            ],
            columns2: [
                {
                    title: '可用人民币',
                    key: 'cny_free',
                },
                {
                    title: '冻结人民币',
                    key: 'cny_freezed',
                },
                {
                    title: '成交时间',
                    key: 'ctime',
                    render: (h, params) => {
                        const row = params.row
                        const color = parseFloat(row.ctime) > 0 ? 'danger' : 'success'
                        const text = row.ctime.split('T')[1].split('.')[0]
                        return h('el-tag', {
                            props: {
                                type: color,
                            },
                        }, text)
                    },
                },
            ],
            data2: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03',
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01',
                },
            ],
            columns3: [
                {
                    title: '成交价格',
                    key: 'price',
                },
                {
                    title: '成交数量',
                    key: 'dealed',
                },
                {
                    title: '成交时间',
                    key: 'ctime',
                    render: (h, params) => {
                        const row = params.row
                        const color = parseFloat(row.ctime) > 0 ? 'danger' : 'success'
                        const text = row.ctime.split('T')[1].split('.')[0]
                        return h('el-tag', {
                            props: {
                                type: color,
                            },
                        }, text)
                    },
                },
            ],
            data3: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03',
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01',
                },
            ],
        }
    },
    methods: {
        get() {
            this.userInfo = ''
            testGet(this.dataUrl, JSON.parse(this.postData)).then(res => {
                this.userInfo = JSON.stringify(res, null, 4)
            })
        },
        test() {
            this.userInfo = ''
            testPost(this.dataUrl, JSON.parse(this.postData)).then(res => {
                this.userInfo = JSON.stringify(res, null, 4)
            })
        },
        init() {
            myStock().then(res => {
                this.data1 = res.results
                console.log(res)
            })
            getUserInfo().then(res => {
                console.log(res)
                this.data2 = res.results
            })
            getMyTransaction().then(res => {
                this.data3 = res.results
                console.log(res)
            })
        },

    },
    mounted() {
        this.init()
    },
}
</script>

<style scoped>
.home-container {
    padding: 10px;
    padding-top: 5px;
}
.home-content {
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}
</style>
